<template>
	<view>
		<view class="lb-main-32" style="padding-bottom: 180rpx;">
			<!-- 列表 -->
			<!-- <u-loadmore  loadmoreText="暂无数据" color="#999" lineColor="#999" dashed line /> -->
			<u-empty v-if="listData.length < 1" mode="address" icon="/static/empty/addr.png">
			</u-empty>
			<view class="lb-box" v-for="(item,index) in listData" :key="index">
				<view class="box-top">
					<view class="box-left" @click="xzAddr(item)">
						<view class="info">
							<text>{{item.contact}}</text>
							<text>{{item.mobile}}</text>
						</view>
						<view class="addr">
							{{item.district}}{{item.address}}
						</view>
					</view>
					<view class="box-right" @click="goTo('/pages/users/my-address-edit/my-address-edit?id=' + item.id)">
						<image src="/static/icon/right.png" mode=""></image>
					</view>
				</view>
				<u-line color="#F5F5F5"></u-line>
				<view class="box-foot">
					<view class="foot-left" @click="setAddr(item)">
						<image :src="item.is_default == 1?'/static/icon/yes.png':'/static/icon/no.png'" mode=""></image>
						<text>设为默认地址</text>
					</view>
					<view class="foot-right" @click="delAddr(item)">
						<image src="/static/icon/del.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="lb-foot">
			<view class="lb-btn" @click="goTo('/pages/users/my-address-add/my-address-add')">
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyAddrApiList,
		getMyAddrApiSet,
		myAddrApiSet,
		myAddrApiDel
	} from "@/api/apis/wash.js"
	export default {
		data() {
			return {
				listData: [],
				type: 0,
			}
		},
		methods: {
			//选择
			xzAddr(item) {
				uni.$emit('addrObj', item);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
				return;
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getMyAddrApiList().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.listData = res.data
					}
				})
			},
			//设置默认
			setAddr(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认设置？',
					success: e => {
						if (e.confirm) {
							myAddrApiSet({
								address_id: item.id
							}).then((res) => {
								if (res.code == 1) {
									_this.$u.toast('设置成功!');
									setTimeout(() => {
										_this.getList();
									}, 1000)
								}
							})
						} else {
							_this.show = false;
						}
					}
				})
			},
			//删除地址
			delAddr(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认删除？',
					success: e => {
						if (e.confirm) {
							myAddrApiDel({
								address_id: item.id
							}).then((res) => {
								if (res.code == 1) {
									_this.$u.toast('删除成功!');
									setTimeout(() => {
										_this.getList();
									}, 1000)
								}
							})
						} else {
							_this.show = false;
						}
					}
				})
			},
		},
		onLoad(options) {
			if (options.type && options.type != undefined) {
				this.type = options.type;
			}
		},
		onShow() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	// 列表
	.lb-box {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		padding: 24rpx 0;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;

		.box-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;


			.box-left {
				.info {
					text {
						font-size: $main-font-28;
						font-weight: bold;
						color: $main-font-color;

						&:nth-of-type(2) {
							font-weight: 400;
							padding-left: 44rpx;
						}
					}
				}

				.addr {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color-grey6;
					padding: 12rpx 0 26rpx;
				}
			}

			.box-right {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.box-foot {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx 24rpx 0;

			.foot-left {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color;

				}
			}

			.foot-right {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	//底部
	.lb-foot {
		width: 100%;
		height: 166rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		bottom: 0;

		.lb-btn {
			width: 600rpx;
			height: 88rpx;
			background: linear-gradient(134deg, #F7583F 0%, #F28F4C 100%);
			border-radius: 44rpx;
			font-size: $main-font-28;
			line-height: 86rpx;
			text-align: center;
			color: $main-font-color-white;
			margin: 24rpx auto 0;
		}
	}
</style>